import React, { Component } from 'react';

import axios from "axios"; //引入axios
import BScroll from "better-scroll"; //引入better-scroll
import { Button, Image } from 'react-vant'; //引入vant

// ❤注：使用滚动的条件 
// 1）样式固定：两层结构嵌套，大盒子固定宽高，小盒子撑开。如果有图片，一定设置图片宽高
// 2）数据一定【请求完毕】，并且页面【渲染完毕】


// ❤滚动组件：对于生命周期的应用比较多 
export class Scroll extends Component {
    constructor(props) { //作为生命周期函数，只会在挂载之前执行一次【用作初始化组件内的数据】
        super(props)
        this.state = {
            list: []
        }
    }

    // componentWillMount() { }  //component  Will   Mount---已经淘汰
    // static getDerivedStateFromProps  //替代了上面的函数 可以访问到props参数，修改组件的state，以便于操作状态


    // 挂在完成后【数据请求(axios,本地数据获取) 初始化scroll等】
    componentDidMount() {
        axios.get("/api/list").then(res => {
            console.log(res.data);
            this.setState({
                // ❤ 注： setState的两个参数：
                // 参数1：是一个对象，里面写要修改的内容
                // 参数2：一个函数，是数据渲染完毕之后的回调函数
                list: res.data,
            }, () => {
                this.bs = new BScroll(".scroll"); //初始化
            })
        })

    }


    // shouldComponentUpdate  //是否执行接下来的render，返回值是true或false【一般用于判断state或props是否影响后面的render】

    componentDidUpdate() {  //组件更新之后   [scroll.refresh()]
        this.bs && this.bs.refresh(); //避免滚动或者滚动不到底的情况

    }

    componentWillUnmount() { //组件即将被卸载【清除延时器，定时器；清除缓存；销毁bscroll】
        this.bs && this.bs.destroy(); //最后组件卸载之前把滚动卸载
    }


    // render 也是生命周期，是渲染的生命周期 
    // ❤注：render执行的条件：
    // 1）挂载的时候默认执行  2）只有setState 【setState设置的数据和之前不能一样】，之后才会触发
    render() {
        // 解构list数据 
        const { list } = this.state;
        const { color, fontSize } = this.props; //props是父组件传递的参数对象
        console.log(this);
        console.log("render中打印list", list);
        return (
            <div className='scroll'>
                <ul>
                    <Button type="primary">主要按钮</Button>
                    {
                        list.length ?  //边界值判断--数据的非空判断
                            // ❤注：用【map】就得有数据的非空判断
                            list.map(item => {
                                return <li key={item.id}>
                                    {/* <img src={item.img} alt="" /> */}
                                    <Image
                                        width="100px"
                                        height="100px"
                                        src={item.img} //图片路径
                                        lazyload={true} //开启图片懒加载
                                        errorIcon={<div style={{ fontSize: 14, color: "red" }}>加载失败</div>} //图片错误的默认展示内容
                                    />
                                    <p>{item.title}</p>
                                    <p>{item.name} <b style={{ color: color, fontSize: fontSize }}>￥{item.num}元</b> </p>
                                </li>
                            }) : "暂无数据" //如果没有数据，给用户提示
                    }
                </ul>
            </div>
        )
    }
}

export default Scroll